<script setup>
import { reactive, watch, watchEffect } from "vue";
import { useGlobalWs } from "@/stores/globalWs.js";

const emits = defineEmits(["close", "send"]);

const props = defineProps({
  user: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const globalWs = useGlobalWs();

const data = reactive({
  msgList: [],
  userList: [],
  msgObj: {
    from: props.user,
    to: {},
    content: "",
  },
});

const onSend = () => {
  if (data.msgObj.content === "") return;
  emits("send", data.msgObj);
  data.msgObj.content = "";
};

watch(() => globalWs.userList, () => {
  data.userList = globalWs.userList.filter(item => item.id !== props.user.id);
  if (data.userList.length === 0) {
    data.msgObj.to = {};
  }
});

// 获取聊天记录
watchEffect(() => {
  if (!data.msgObj.from.id || !data.msgObj.to.id) return;
  const key1 = `${data.msgObj.from.id}-${data.msgObj.to.id}`;
  const key2 = `${data.msgObj.to.id}-${data.msgObj.from.id}`;
  globalWs.userMsgMap[key1] && (data.msgList = globalWs.userMsgMap[key1]);
  globalWs.userMsgMap[key2] && (data.msgList = globalWs.userMsgMap[key2]);

  if (!globalWs.userMsgMap[key1] && !globalWs.userMsgMap[key2]) {
    data.msgList = [];
  }
});
</script>

<template>
  <div class="chat-window">
    <div class="title-container">
      <div class="title">{{ props.user.name }}</div>
      <div class="close-btn" @click="emits('close', props.user)">×</div>
    </div>
    <div class="content-container">
      <div class="left-wrapper">
        <div class="user" v-for="user in globalWs.userList.filter(item => item.id !== props.user.id)"
             :class="{'user-active': data.msgObj.to.id === user.id}"
             @click="data.msgObj.to = data.msgObj.to.id === user.id ? {} : user">
          {{ user.name }}
        </div>
      </div>
      <div class="right-wrapper">
        <template v-if="data.msgObj.to.id">
          <div class="msg-container">
            <div v-if="data.msgList.length!==0" class="msg-wrapper" :class="{'msg-my': item.from.id === props.user.id}"
                 v-for="item in data.msgList">
              <div class="msg">
                <div class="name-time">
                  <span class="name">{{ item.from.id === props.user.id ? "" : item.from.name }}</span>
                  <span class="time">{{ item.date }} {{ item.time }}</span>
                </div>
                <div class="content">
                  {{ item.content }}
                </div>
              </div>
            </div>
            <div v-else class="empty">暂无聊天记录，请开始聊天吧~</div>
          </div>
          <div class="bottom-container">
            <input type="text" placeholder="请输入" v-model="data.msgObj.content"
                   @keyup.enter="onSend">
            <div class="send-btn" @click="onSend">发送</div>
          </div>
        </template>
        <div v-else class="empty">
          {{
            globalWs.userList.filter(item => item.id !== props.user.id).length === 0 ? "暂无用户" : "请选择一个聊天对象"
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chat-window {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #bbbbbb;

  .title-container {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    background: #ffffff;
    display: flex;
    align-items: center;

    .title {
      flex: 1;
    }

    .close-btn {
      width: 20px;
      height: 20px;
      background: #e3e3e3;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .content-container {
    flex: 1;
    overflow: hidden;
    display: flex;

    .left-wrapper {
      height: 100%;
      overflow-y: auto;

      .user {
        background: #eaeaea;
        padding: 10px 8px;
        border-bottom: 1px solid #9b9b9b;
        cursor: pointer;
        position: relative;
        user-select: none;

        &:hover {
          background-color: #ddebff;
        }
      }

      .user-active {
        background-color: #f2f9ff;
      }

      .user-active:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background-color: #1890ff;
      }
    }

    .right-wrapper {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .msg-container {
        flex: 1;
        overflow-y: auto;
        box-shadow: 0 0 5px 0 #868282 inset;

        .msg-wrapper {
          display: flex;

          .msg {
            max-width: 45%;
            margin: 10px;
            display: flex;
            flex-direction: column;

            .name-time {
              font-size: 12px;

              .name {
                margin-right: 10px;
              }
            }

            .content {
              width: fit-content;
              font-size: 14px;
              padding: 5px 8px;
              border-radius: 5px;
              background-color: #f2f2f2;
            }
          }
        }

        .msg-my {
          justify-content: flex-end;

          .msg {
            align-items: flex-end;

            .content {
              background-color: #1890ff;
              color: #fff;
            }
          }
        }
      }

      .bottom-container {
        height: 50px;
        display: flex;

        input {
          flex: 1;
          padding: 0 5px;
          outline: none;
          border: none;
        }

        .send-btn {
          width: 80px;
          background-color: #1890ff;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &:active {
            background-color: #40a9ff;
          }
        }
      }

      .empty {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #6e6e6e;
      }
    }
  }

}
</style>
